.content {
  margin: auto;
  width: 680px;
  // margin-top: 40rpx;
  // background: #FFFFFF;
  // box-shadow: 1px 2px 6px 0px rgba(154, 154, 154, 0.2);
  // border-radius: 8px;

  margin-bottom: 30rpx;


  .hole-card {
    position: relative;
    overflow: hidden;
    margin: 0 auto;

    .rules-center {
      background-color: #fff;
      border: none;

      .rules-title {
        text-align: center;
        font-size: 36rpx;
        font-family: SourceHanSansCN;
        font-weight: 500;
        color: #FF6638;


      }

      .rules-text {

        font-size: 28rpx;
        font-family: PingFangSC;
        font-weight: 500;
        color: #343434;
        padding: 58rpx 45rpx;
      }

      .rules-btn {
        width: 580px;
        height: 90px;
        background: #FF6638;
        border-radius: 8px;

        font-size: 36rpx;
        font-family: SourceHanSansCN;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 90rpx;
        text-align: center;
        margin: auto;
      }

      // box-shadow: 1px 2px 6px 0px rgba(154, 154, 154, 0.2);
      // box-shadow: 1px 2px 6px 0px rgba(154, 154, 154, 0.2);
    }

    // 孔在下方
    .hole-down {
      // 卡片宽度
      width: 680px;
      overflow: hidden;

      // 可不要
      // height: 401px;

      // 阴影 - 不需要就去掉
      // 3px 大小, 灰色阴影
      filter: drop-shadow(0 0 3px #fff);

      &::before {
        position: absolute;
        content: "";
        // 孔半径
        bottom: -40px;
        left: -40px;
        // 孔直径
        width: 80px;
        height: 80px;
        border-radius: 50%;

        // 白色背景，宽度 = 卡片宽度 - 孔直径
        box-shadow: 0 0 0 480px #fff;
        z-index: -1;
      }

      &::after {
        position: absolute;
        content: "";
        bottom: -40px;
        right: -40px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        box-shadow: 0 0 0 480px #fff;
        z-index: -1;
      }

      // 卡片中间虚线 不需要就去掉
      // .middle-border {
      //   position: absolute;

      //   // 宽度 = 卡片宽度 - 孔直径
      //   width: 480px;
      //   // 左移孔半径
      //   left: 60px;
      //   bottom: 0;
      //   border: 1px dashed #ccc;
      // }
    }

    // 孔在上方
    .hole-up {
      width: 680px;
      overflow: hidden;
      filter: drop-shadow(0 0 0px #fff);

      height: 40px;

      &::before {
        position: absolute;
        content: "";
        top: -40px;
        left: -40px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        box-shadow: 0 0 0 480px #fff;
        z-index: -1;
      }

      &::after {
        position: absolute;
        content: "";
        top: -40px;
        right: -40px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        box-shadow: 0 0 0 480px #fff;
        z-index: -1;
      }
    }

    // // 遮盖上边阴影, 没有阴影则删掉
    // .cover-up {
    //   // 3px 为阴影宽度
    //   padding: 3px;
    //   padding-top: 0;
    //   overflow: hidden;
    // }

    // // 遮盖下边阴影
    // .cover-down {
    //   padding: 3px;
    //   padding-bottom: 0;
    //   overflow: hidden;
    // }
  }
}
